<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { showToast, showDialog } from "vant";
import { setDirectRate } from "@/api";
import { UserModule } from "@/store/modules/user";

export default defineComponent({
    emits: ["load"],
    setup(props, ctx) {
        const { t } = useI18n();
        const open = ref(false);
        const loading = ref(false);
        const formData: any = reactive({
            id: "",
            amount: "",
        });
        const formData2: any = reactive({
            amount: "",
        });
        const sendSetDirectRate = async (): Promise<void> => {
            try {
                if (Number(formData.amount) < Number(formData2.amount)) {
                    showToast(t("layout.Itratio2"));
                    return;
                }
                loading.value = true;
                await UserModule.verifyToken();
                const res = await setDirectRate(formData);
                if (res.data.code == 20) {
                    ctx.emit("load");
                    showToast({
                        message: t("layout.success"),
                        icon: "checked",
                        className: "_showToast",
                    });
                    open.value = false;
                } else {
                    showToast(t("layout.Itratio"));
                }
            } catch (error) {}
            loading.value = false;
        };
        const show = ({ Id, Rate }) => {
            open.value = true;
            formData.id = Id;
            formData.amount = Rate;
            formData2.amount = Rate;
        };
        return {
            open,
            loading,
            formData,
            show,
            sendSetDirectRate,
        };
    },
});
</script>

<template>
    <van-popup v-model:show="open" closeable position="bottom" round>
        <div class="popup">
            <div class="title">{{ $t('layout.Modifyscale') }}</div>
            <div class="info">
                <div class="cell">
                    <van-field v-model="formData.amount" type="number" :placeholder="$t('layout.Pleaseentertheratio')" />
                </div>
                <van-button type="primary" @click="sendSetDirectRate" :loading="loading">{{ $t('layout.confirm')
                }}</van-button>
            </div>
        </div>
    </van-popup>
</template>

<style lang="less" scoped>
.popup {
    background: #4d3daa;

    .title {
        position: relative;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 55px;
        font-size: 18px;
        font-weight: 500;
        color: #ffffff;

        img {
            position: absolute;
            left: 20px;
            width: 22px;
            height: 16px;
        }
    }

    .info {
        padding: 20px 15px;
        background: #fff;
        border-radius: 10px 10px 0 0;
        overflow: hidden;

        .cell {
            margin-top: 20px;

            .name {
                display: flex;
                justify-content: space-between;

                span {
                    color: #4d3daa;
                }
            }

            .van-field {
                margin-top: 12px;
                height: 45px;
                border-radius: 6px;
                color: #4d3daa;
                border: 1px solid #4d3daa;

                &:deep(input) {
                    color: #4d3daa;
                }
            }

            .text {
                margin-top: 8px;
                margin-bottom: 20px;
            }
        }

        .van-button {
            margin-top: 20px;
        }
    }
}
</style>
